<template>
  <div>
<my-header title="我的推广" @onClickLeft="$router.push('/my')"/>
<div class="collection-box">
    <div class="left">推广店铺数：{{myCollection.length}}家</div>
    <div class="right">已产生佣金总额：￥<span class="money">3012</span></div>
</div>
<div class="myCollectionBox" v-for="(item, i) in myCollection" :key="i">
    <store-info :storesName="item.name" :StoreAddress="item.address" :storesNumber="item.doorNumber" :storesDistance="item.distance">
    <span slot="right" class="slotMoney">
        <span>佣金：</span>
        <span class="money">￥{{item.money}}</span>
    </span>
</store-info>
</div>
  </div>
</template>

<script>
import MyHeader from '../components/my-header.vue'
import StoreInfo from '../components/store-info.vue'
import { mapState } from 'vuex'
export default {
  name: 'myCollectionIndex',
  components: {
    MyHeader,
    StoreInfo
  },
  props: {},
  data () {
    return {

    }
  },
  computed: {
    ...mapState('m_my', ['myCollection'])
  },
  watch: {},
  created () {

  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.collection-box {
    display: flex;
    justify-content: space-between;
    font-size: 30px;
    height: 80px;
    align-items: center;
}
.slotMoney {
    display: flex;
    align-items: center;
    font-size: 25px;
}
.right {
    color: #f00000;
}
.money {
      color: orangered;
    }
</style>
